const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const rewireLess = require('react-app-rewire-less');
const path = require('path');
function resolve(dir) {
    return path.join(__dirname, '.', dir)
}
const addCustomize = () => config => {
    require('react-app-rewire-postcss')(config, {
        plugins: loader => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
                autoprefixer: {
                    flexbox: 'no-2009',
                },
                stage: 3,
            }),
            require('postcss-aspect-ratio-mini')({}),
            require('postcss-px-to-viewport')({
                viewportWidth: 375, // (Number) The width of the viewport.
                viewportHeight: 667, // (Number) The height of the viewport.
                unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
                viewportUnit: 'vw', // (String) Expected units.
                selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
                minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
                mediaQuery: false // (Boolean) Allow px to be converted in media queries.
            }),
            require('postcss-write-svg')({
                utf8: false
            }),
            require('postcss-viewport-units')({}),
            require('cssnano')({
                "cssnano-preset-advanced": {
                    zindex: false,
                    autoprefixer: false
                },
            })
        ]
    });
    return config;
}

//设置路径别名
const setAlias  = () => config =>{
    config.resolve.alias = {
        '@': resolve('src')
    }
    return config;
}

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { 
            "brand-primary": "#e92758",
        },
    }),
    addCustomize(),
    setAlias(),
);